<template>
    <div id="test" >
            <!-- <van-search v-model="value" 
                class="search"
                show-action 
                shape="round"
                :left-icon="saerchImgUrl"
                placeholder="请输入搜索关键词" 
                @search="onSearch" 
                @cancel="onCancel" >
                
                <template #action>
                    <div @click="onCancel" class="cancel" >取消</div>
                    
                </template>
            </van-search> -->
            <div class="suo">
                <div class="ssuo">
                    <div class="oposs">
                        <input placeholder="请输入搜索关键词"  class="sssuoin" type="text" v-model="value" v-on:keyup.enter="onSearch(value)">
                        <div class="sssimg">
                            <img class="magnimg" src="../../assets/images/magnifying.png" alt="" v-on:touchend="onSearch(value)">
                        </div>
                        <div>
                            <img class="cac"  v-on:touchend="onCancel" src="../../assets/icons/online/cacle21.png" alt="">
                        </div>
                    </div>
                    
                    <div class="ssstext" v-on:touchend="again">
                        取消
                    </div>
                </div>
            </div>
            
        <div v-if="functionResult.length == 0 && productResult.length == 0 && istu" class="BOX">
            <div v-if="functionResult.length == 0 && productResult.length == 0 && istu" class="nochart"> 
                <img src="../../assets/images/noResult.png" alt="">
                <div class="tuzi">抱歉，这里没有您要找的数据哦~</div>
            </div>
        </div>
        <p v-if="searchNumber>0" class="searchResults" > 共{{searchNumber}}个搜索结果 </p>

        <div   class="bgf" >
        <div v-if="historyResult.length>0&&isshow"  class="record" >
            <!-- <p style="font-size: large; padding-left: 25px;">服务</p> -->
            <div class="hrecord historyrecord" >
                历史记录
                <img  @click="delConfirm" class="recordimg"  src="~@/assets/img/del_s.png" alt=""/>
            </div>
        </div>
        <div class="recordItem" v-if="historyResult.length>0&&isshow"  >

            <span v-for="j in historyResult" v-bind:key="j" class="recorditem" >
                <p @click="zid(j)"  class="recordP" >{{j}}</p></span>
            <!-- <span style=" border: solid 1px #d0d0d0; height: 32px; margin-top: 16px; margin-left: 16px; border-radius: 16px !important;"><p style="padding: 10px">车险</p></span>
            <span style=" border: solid 1px #d0d0d0; height: 32px; margin-top: 16px; margin-left: 16px; border-radius: 16px !important;"><p style="padding: 10px">财宝直播 </p></span> -->
        </div>
        </div>
        <div v-if="hotSearchResult.length > 0" class="hot" >
            <!-- <p style="font-size: large; padding-left: 25px;">服务</p> -->
            <div class="hotdiv hotseach">
                热门搜索
            </div>
        </div>
        <div class="hotseachItem" >
            <!-- <div style="margin: 30px; display: flex;"> -->
            <div class="hotseachItemd" >
                <div class="hotseachitem" >
                    <ul v-for="(item, i) in hotSearchResult" v-bind:key="i">
                        <!-- {{item}} -->
                        <!-- <li  @click="hotProduct(item)" ><span v-bind:style="colorArr[i]" >{{i+1}}</span>&nbsp;&nbsp;·&nbsp;&nbsp;{{item.content}}</li> -->
                        <li  @click="hotProduct(item)" >
                            <span v-if="i<3"> <img class="imageArr" :src="imageArr[i]" alt=""> </span>
                            <span v-else :class="i > 8 ? 'cloraff': 'coloraaa'" >{{i+1}}</span>
                            ·&nbsp;{{item.content}}
                            <!-- ·&nbsp;&nbsp;{{item.content}} -->
                        </li>
                    </ul>
                </div>
               
            </div>
                
        </div>
        <div v-if="showSearch" class="service"  >
            <div class="serviced" >
                服务
            </div>
        </div>
        <div v-if="showSearch" class="box">
            <div class="seachItem" >
                <div @click="service(item)" class="seachitem"  v-for="(item , i ) in functionResult" v-bind:key="i">
                    <img  :src=item.headImage alt=""/>
                    <p class="seachP" >{{item.fucName}}</p>
                    <div v-if="item.fucTag == '热门'" class="hotimg">
                        <img src="../../assets/images/hot.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div v-if="showSearchProduct && showSearchProduct" class="product" :class="{ 'isactiveTwo': showSearch}" >
            <!-- <p style="font-size: large; padding-left: 25px;">服务</p> -->
            <div class=" productd" >
                产品
            </div>
        </div>
        <div class="productItem" >
            <!-- <div style="margin: 30px; display: flex;"> -->
            <div class="productlist">

            
                <div class="productitem"  v-for="(item , i ) in productResult" v-bind:key="i" @click="product(item)">
                    <img class="productitemimg"  :src="item.pictureurl" alt="">
                    <div class="productitemdv" >
                        <!-- <br/> -->
                        <!-- <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px;">{{item.productname}}</p> -->
                        <p class="productitemp" >{{item.productname}}</p>
                        <!-- <br/> -->
                        <p class="productitempp" >{{item.description}}</p>
                        <!-- <br/> -->
                        <div v-if="item.producttag" class="product-g">
                            <span >{{item.producttag}}</span>
                        </div>
                        <div v-else class="product-e"></div>
                        <div v-if="item.dataflag == 0 && item.discountprice != null && item.discountprice != false " class="money" >
                         <span v-if="item.discountprice !='' && item.discountprice != null" class="moneys" >{{item.discountprice}}<p class="pmoney" >元起</p></span>
                            <p class="pdiscountprice">{{item.discountprice}}元起</p>
                            <p v-if="item.discountlimitdate != null && item.discountlimitdate != false"  class="ptime">优惠日期:{{item.discountlimitdate}}</p>
                            <!-- <p  v-if="item.keyword!=='' && item.keyword!==null" class="moneyr" >{{item.producttag}}</p> -->
                            <!-- <p  v-else style="white-space: nowrap;width:100px overflow: hidden; text-overflow: ellipsis;">{{item.keyword}}</p> -->
                        </div>
                        <div v-else class="money">
                            <span v-if="item.minipremium !='' && item.minipremium != null" class="moneys" >{{item.minipremium}}<p class="pmoney" >元起</p></span>
                            <p v-if="item.discountprice != null && item.discountprice != false" class="pdiscountprice">{{item.discountprice}}元起</p>
                            <p v-if="item.discountlimitdate != null && item.discountlimitdate != false" class="ptime">优惠日期:{{item.discountlimitdate}}</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- <div style="margin: 30px;" v-for="(item , i ) in productResult" v-bind:key="i">
                <img style="float: left; height" src="~@/assets/images/myInfo/info_phone.png" alt="">
                <div style="float: right; margin-left: 25px;">
                    <p>驾行天下旅游意外保险</p>
                    <br/>
                    <p>意外身故残疾/意外医疗/驾乘意外</p>
                    <br/>
                    <p>畅享自驾，安心出游</p>
                    <br/>
                </div>
            </div> -->
        </div>
    </div>
</template>


<script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator';
    import { Collapse, CollapseItem,Icon, Search, Dialog  } from 'vant';
    import { cloudApi } from '@/api/indexApi';
import { log } from '@/utils';
    Vue.use(Search);
    Vue.use(Dialog);
    Vue.use(Icon);
    @Component({})
    export default class SearchDel extends Vue {
        data() {
            return {
                saerchImgUrl: require("../../assets/images/magnifying.png"),
                value: '',
                storage:[],
                isshow:true,
                istu:false,
                searchNumber: 0,
                hotSearchResult: [],
                functionResult: [],
                productResult: [],
                historyResult: [],
                showSearch: false,
                showSearchProduct: false,
                colorArr:[
                    "color :transparent;background: linear-gradient(130deg,#ffff00 0%, #bd8a00 100%);font-weight: 900;-webkit-background-clip: text; font-family: DINOT, DINOT-Black; font-style: italic;width: 13px;display: inline-block;",
                    "color :transparent;background: linear-gradient(130deg,#d4d4d4 0%, #565656 100%);font-weight: 900;-webkit-background-clip: text; font-family: DINOT, DINOT-Black; font-style: italic;width: 13px;display: inline-block;",
                    "color :transparent;background: linear-gradient(130deg,#fbbc75 0%, #e36917 100%);font-weight: 900;-webkit-background-clip: text; font-family: DINOT, DINOT-Black; font-style: italic;width: 13px;display: inline-block;",
                    "color :#00A76D; font-family: DINOT, DINOT-Black; font-style: italic;font-weight: 900;width: 13px;display: inline-block; margin-left: -3px;",
                    "color :#00A76D; font-family: DINOT, DINOT-Black; font-style: italic;font-weight: 900;width: 13px;display: inline-block; margin-left: -3px;",
                    "color :#00A76D; font-family: DINOT, DINOT-Black; font-style: italic;font-weight: 900;width: 13px;display: inline-block; margin-left: -3px;",
                    "color :#00A76D; font-family: DINOT, DINOT-Black; font-style: italic;font-weight: 900;width: 13px;display: inline-block; margin-left: -3px;",
                ],
                imageArr: [
                    require("../../assets/icons/online/1.png"),
                    require("../../assets/icons/online/2.png"),
                    require("../../assets/icons/online/3.png"),
                ]

            };
        }
        onSearch(value: string) {
            console.log('//////search', value)
            this.$data.isshow = false
            this.$data.istu = true
            if(value!==""){
                console.log(1);
                
                this.$data.historyResult.unshift(value)
                // this.$data.storage.unshift(value)
                window.localStorage.setItem('historyResult',this.$data.storage )
            }
            
            
            this.searchPolicy(value)
            this.$data.hotSearchResult = []
        }
        onCancel() {
            console.log('//////onCancel', this)
            this.$data.value="";
        }
        created() {
            console.log('**********', this);
            console.log('*****DDD*****',  typeof window.localStorage.getItem('historyResult'));
            console.log('*****DDyyyD*****',   window.localStorage.getItem('historyResult'));
           
            let that = this;
            if( typeof window.localStorage.getItem('historyResult') == 'string'){
                if((window as any).localStorage.getItem('historyResult').split(',').length>0&&(window as any).localStorage.getItem('historyResult').split(',')[0]!==''){
                    (window as any).localStorage.getItem('historyResult').split(',').forEach(element => {
                        that.$data.storage.push(element);
                    });

                }else{
                    that.$data.storage = []
                }
                // that.$data.storage = ((window as any).localStorage.getItem('historyResult').split(','));
            } else {
                that.$data.storage = window.localStorage.getItem('historyResult')
            }
            if (that.$data.storage === null) {
                that.$data.storage = []
            }
            console.log("---that.$data.storage----", that.$data.storage);
            // that.$data.storage =JSON.parse(that.$data.storage)
            that.$data.historyResult = that.$data.storage
            console.log('hotSearchResult', that.$data.hotSearchResult)
            cloudApi.queryHotSearch().then(function(res: any): void {
                console.log('12121212', res.data.data.hotTagList)
                if(res.status == 200 && res.data && res.data.result) {
                    that.$data.hotSearchResult=res.data.data.hotTagList
                }
            })
        }
        beforeCreate () {
            document.querySelector('body').setAttribute('style', 'background-color:#F5F6FA;')
        }
        delConfirm() {
            Dialog.setDefaultOptions({
                'confirmButtonColor': '#009b63',
                'width': '295px',
                'className':'yy',
                'overlayStyle': {'background-color': '#222222', 'opacity': '0.8'}
            })
            Dialog.confirm({
                // title: '标题',
                width:'295px',
                // confirm-button-color:#009b63,
                message: '确定删除全部历史记录么?',
            })
            .then(() => {
                // on confirm
                this.$data.historyResult=[];
                window.localStorage.setItem('historyResult',this.$data.historyResult)

            })
            .catch(() => {
                // on cancel
            });
        }
        searchPolicy(key: string) {
            console.log('KKKKKKKKKKKK', key)
            let that = this;
            var con = { "keyword": key}
             cloudApi.queryProductAndFunctionSearch(con).then(function(res: any): void {
                console.log('productResult', res)
                if(res.status == 200 && res.data && res.data.result) {
                    that.$data.functionResult = res.data.data.functionVoList;
                    that.$data.searchNumber = res.data.data.functionVoList.length + res.data.data.productVoList.length || 0;
                    if (res.data && res.data.data && res.data.data.functionVoList && res.data.data.functionVoList.length>0) {
                        that.$data.showSearch=true;
                    }else {
                        that.$data.showSearch=false;
                    }
                    that.$data.productResult = res.data.data.productVoList;
                    if(res.data && res.data.data && res.data.data.productVoList && res.data.data.productVoList.length>0){
                        that.$data.showSearchProduct=true;
                    } else {
                        that.$data.showSearchProduct=false;
                    }
                }
            })
        }
        again(){
            wx.miniProgram.switchTab({ url: '/pages/index/index' })
        }
        hotProduct(item){
            window.location.href = item.url
        }
        service(item){
            console.log('item',item);
            window.location.href = item.url
        }
        product(item){
            window.location.href = item.content
        }
        zid(item){
            this.$data.isshow = false
            this.$data.istu = true
            this.$data.value = item
            console.log(this.$data.value);
            this.searchPolicy(item)
            this.$data.hotSearchResult = []
        }
    }
</script>
<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
        background-color: #F5F6FA;
    }
    html{
        background-size:100% 100%; 
        background-color: #F5F6FA;
    }
    
    .body{
        background-color: #F5F6FA;
    }
    .yy{
        font-size: 17px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #333333;
    }
    .BOX{
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
    }
    /deep/ .van-search .van-cell {
        border: 1px solid #e8eaeb;
        border-radius: 31px;
        background-color: #fbfbfb;
    }
    /deep/ .van-field__left-icon{
        margin-left: 10px !important;
    }
    /deep/ .van-search__action{
        margin-left: 16px;
        margin-right: 10px;
    }
    /deep/ .van-button__text {
        color: #009b63 !important;
    }
    body{
        background-color: #F5F6FA;
    }
    .pmoney{
        font-size: 14px;
        font-family: DIN Alternate, DIN Alternate-Bold;
        font-weight: 700;
        text-align: left;
        color: #ff6260;
        display: inline-block;
        background-color: #fff;
    }
    .coloraaa{
        color :#00A76D; 
        font-family: DINOT, DINOT-Black; 
        font-style: italic;
        font-weight: 900;
        width: 13px;
        display: inline-block; 
        padding-right: -3px;
        margin-left: -3px;
    }
    .cloraff{
        color :#00A76D; 
        font-family: DINOT, DINOT-Black; 
        font-style: italic;
        font-weight: 900;
        width: 13px;
        display: inline-block; 
        margin-right: 6px;
        margin-left: -3px;
    }
    .search{
        position: relative;
        // float: none;
        width: 100%;
        padding-left: 10px;
        background-color: #FFFFFF;
    }
    .pdiscountprice{
        width: 33%;
        flex-wrap: nowrap;
        font-size: 10px;
        line-height: 1;
        font-family: DIN Alternate, DIN Alternate-Bold;
        font-weight: 700;
        background-color: #fff;
        display: flex;
        align-items: flex-end;
        text-decoration:  line-through;
        text-align: left;
        color: #999999;
        margin-right: 5px;
        white-space: nowrap;
    }
    .searchResults{
        margin-left: 20px; 
        // padding: 20px; 
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #999999;
        // border: 1px solid #606972;
    }
    .bgf{
        // background-color: #FFFFFF;
    }
    .record{
        // background-color: #fff; 
        display: inline-flex; 
        width: 100%;
    }
    .box{
        background-color: #fff;
        box-sizing: border-box;
        padding-bottom: 34px;
        padding-left: 23px;
        margin-bottom: 10px;
    }
    .hrecord{
        padding-top: 10px; 
        // padding-bottom: 10px; 
        // border-bottom: 1px solid #E5E5E5; 
        width: 100%; 
        margin-left: 20px; 
        margin-right: 30px;
        // background-color: #FFFFFF;
    }
    .historyrecord{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px; 
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #222222;
        // font-family: PingFang SC;background-color: #FFFFFF;
    }
    .recordItem{
        // background-color: #fff; 
        display: inline-flex;  
        margin-right: 15px;
        flex-flow: wrap;
        border-radius: 32px;
    }
    .recordP{
        padding: 10px;
        background: #efefef;
        border-radius: 16px
    }
    .recorditem{
        margin-top: 16px; 
        margin-left: 16px; 
        word-break: keep-all;
        border-radius: 16px !important;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #222222;
    }
    .hot{
        // background-color: #fff; 
        display: inline-flex; 
        width: 100%;
        // margin-top: 34px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #222222;
    }
    .hotdiv{
        // padding-top: 34px; 
        padding-bottom: 17px; 
        // border-bottom: 1px solid #E5E5E5; 
        width: 100%; 
        margin-left: 20px; 
        margin-right: 30px; 
        // background-color: #FFFFFF;
    }
    .hotseach{
        font-size: 16px; 
        font-family: PingFang SC;
        border-bottom: solid 1px #f0f0f0;
        // background-color: #FFFFFF;
    }
    .hotseachItem{
        display: flex; 
        // background-color: #fff;
        width: 100%;
        ul{
            // background-color: #FFFFFF;
            li{
                // background-color: #FFFFFF;
                
            }
            span{
                // background-color: #FFFFFF;
            }
        }
    }
    .service{
        background-color: #fff; 
        display: flex; 
        width: 100%;
        background-color: #FFFFFF;
        .serviced{
            padding-top: 10px;
            background-color: #FFFFFF;
            padding-left: 20px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Semibold;
            background-color: #FFFFFF;
            font-weight: 600;
        }
    }
    .product{
        background-color: #fff; 
        display: flex; 
        width: 100%;
        // margin-top:10px
    }
    .isproduct{
        background-color: #fff; 
        display: flex; 
        width: 100%;
        margin-top:10px
    }
    .hotseachItemd{
        // background-color: #FFFFFF;
    }
    .hotseachitem{
        float: right; 
        margin-left: 23px;
        font-size: 16px;
        // background-color: #FFFFFF;
    }
    .recordimg{
        float: right; 
        width: 17px; 
        height: 16px;
    }
    ul{
        list-style: none;
    }
    li{
        position: relative;
        // padding-left: 30px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
    }
    .seachItem{
        display: flex; 
        background-color: #fff;
        // width: 100%;
        flex-flow: row wrap;
        background-color: #FFFFFF; 
        // justify-content: space-between;
        .seachitem{
            // margin:25px;
            margin-top: 15px;
            position: relative;
            display: flex;
            width:56px;
            background-color: #FFFFFF;
            flex-direction: column;
            justify-content: center;
            margin-right:25px;
            // margin-left: 24px;
            align-items: center;

        }
        img{
            width:37px;
            height:37px;
            background-color: #FFFFFF;
        }
        .seachP{
            text-align: center;font-size: 13px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            background-color: #FFFFFF;
            color: #222222;
            margin-top: 8px;
        }
    }
    .productd{
        padding-top: 10px;
        background-color: #FFFFFF;
        padding-left: 20px; 
        font-size: large;
        background-color: #FFFFFF;
        font-weight: 600;
    }
    // .activeTwo{
    //     padding-top: 10px;
    //     background-color: #FFFFFF;
    //     padding-left: 25px; 
    //     font-size: large;
    //     background-color: #FFFFFF;
    //     font-weight: 600;
    // }
    .productItem{
        // display: flex; 
        border-radius: 10px;
        // padding: 20rpx rpx 0rpx 22rpx;
        background-color: #fff;
        flex-flow:row wrap;
    }
    .productitem{
        // width: 334px;
        border-bottom: 1px solid #d7d7d7;
        padding-top: 17px;
        margin-left: 20px;
        margin-right: 15px;
        padding-bottom: 17px;
        display: flex;
        background-color: #FFFFFF;
        justify-content: space-between;
    }
    .productitemimg{
        // float: left; 
        width: 105px; 
        height: 105px;
        border-radius: 5px;
        padding-right: 13px;
        background-color:#FFFFFF ;
    }
    .cancel{
        background-color: #FFFFFF;
    }
    .productitemdv{
        background-color: #FFFFFF;
        // width: 100%;
        float: right;
    }
    .productitemp{
        font-size: 16px;
        line-height: 1;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        margin-bottom: 13px;
        background-color: #FFFFFF;
        color: #222222;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        width: 220px;
    }
    .productitempp{
        opacity: 0.8;
        font-size: 14px;
        line-height: 1;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #666666;
        background-color: #FFFFFF;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        width: 230px;
        margin-bottom: 17px;
    }
    .productlist{
        // margin-left: 7px;
        // margin-right: 7px;
        background-color: #fff;
    }
    .ptime{
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        line-height: 1;
        display: flex;
        align-items: flex-end;
        text-align: left;
        color: #ff6260;
        width: 90%;
        flex-wrap: nowrap;
        background-color: #fff;
        white-space: nowrap;
    }
    .money{
        display: flex;
        flex: 1;
        // justify-content: space-between;
        background-color: #FFFFFF;
        align-content: flex-end;
    }
    .moneys{
        font-size: 16px;
        line-height: 1;
        font-family: DIN Alternate, DIN Alternate-Bold;
        font-weight: 700;
        text-align: left;
        margin-right: 4px;
        word-break: keep-all;background-color: #FFFFFF;
        color: #ff6260;
        width: 33%;
        flex-wrap: nowrap;
        display: flex;
        align-items: flex-end;
    }
    .moneyr{
        white-space: nowrap;
        background-color: #FFFFFF; 
        overflow: hidden; 
        text-overflow: ellipsis;
        width:100px;
        font-family: DIN Alternate, DIN Alternate-Bold;
        font-size: 12px;
        line-height: 1;
        border: solid 1px #07a662; 
        border-radius: 15px ;
        text-align: center; 
        color: #07a662;
    }
    .nochart{
        margin: 0 auto;
        margin-top: 146px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        img{
            margin: 0 auto;
            width: 188px;
            height: 126px;
        }
    }
    .tuzi{
        font-size: 14px;
        margin: 0 auto;
        margin-top: 15px;
        line-height: 1;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #717171;
    }
    .product-e{
        height: 26px;
        background-color: #fff;
    }
    .product-g{
        background-color: #fff;
        font-size: 10px;
        color:#009B63;
        border-radius: 5px;
        /* padding: 5rpx; */
        // padding-left: 5px;
        padding-right: 5px;
        // border: 1px solid #009b63;
        margin-bottom: 16px;
        font-family: PingFang SC, PingFang SC-Regular;
        >span{
            border: 1px solid #009b63;
            color: #009B63;
            border-radius: 5px;
            font-size: 10px;
            padding-left: 5px;
            padding-right: 5px;
            background-color: #fff;
            font-family: PingFang SC, PingFang SC-Regular;
        }
    }
    /deep/ .van-dialog{
        border-radius: 20px;
    }
    /deep/.van-dialog  {
        font-size: 17px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #333333;
    }
    .magnimg{
        position: absolute;
        top: 0;
        z-index: 999;
        width: 13px;
        background-color: #fbfbfb;
    }
    .hotimg{
        position: absolute;
        width: 25px;
        height: 12px;
        background-color: #fff;
        left:30px;
        top: -6px;
        >img{
            width: 100%;
            height: 100%;
            position: absolute;
        }
    }
    .sss{

    }
    .imageArr{
        width: 8px;
        height: 12px;
        font-style: italic;
        margin-right: 2px;
    }
    .suo{
        background-color: #fff;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .ssuo{
        display: flex;
        background-color: #fff;
        margin-left: 10px;
        margin-right: 10px;
        align-items: center;
        justify-content: space-between;
        .sssimg{
            position: absolute;
            top: 8px;
            left: 10px;
            background-color: #fbfbfb;
        }
        .sssuoin{
            height: 30px;
            width: 100%;
            border: 1px solid #e8eaeb;
            border-radius: 31px;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #999999;
            padding-left:36px;
        }
        .oposs{
            width: 310px;
            position: relative;
            background-color: #fff;
            display: flex;
            align-items: center;
        }
        .ssstext{
            background-color: #fff;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #222222;
            display: flex;
            align-items: center;
            // padding-left: 16px;
            // justify-content: space-between;
        }
        .cac{
            position: absolute;
            width: 16px;
            height: 16px;
            top: 8px;
            right: 10px;
        }
    }
</style>


